<template>
  <view class="container">
    <view class="top_img">
      <image src="@/static/image/home1.png" mode="scaleToFill" />
      <view class="my_coupon flex_s" @click="JumpPath('/pages/voucher/index')">
        <text>我的优惠券</text>
        <up-icon name="arrow-right" color="#fff" size="14"></up-icon>
      </view>
    </view>
    <view class="card_box card1 flex_c">
      <view class="in_card">
        <view class="title">认证车辆信息</view>
        <view class="tip_box">
          参与活动，认证您的爱车信息，有机会得优惠券哦
        </view>
        <view class="car_box">
          <template v-if="carListData.length">
            <scroll-view
              scroll-y="true"
              :style="{ height: carListData.length > 1 ? '230rpx' : 'auto' }"
            >
              <view
                class="car_item flex_s"
                v-for="(item, index) in carListData"
                :key="index"
              >
                <view class="icon_box">
                  <image src="@/static/image/car_icon.png" mode="scaleToFill" />
                </view>
                <view class="car_info">
                  <view class="car_top">
                    <view class="car_id line1" v-if="item.license_plate">
                      {{ item.license_plate }}
                    </view>
                    <view class="car_id line1" v-if="item.vin">
                      {{ item.vin }}
                    </view>
                    <view class="car_name">
                      <text style="margin-right: 10rpx">{{ item.name }}</text
                      ><text>{{ item.phone }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </template>

          <view class="car_item flex_s" v-else>
            <view class="icon_box">
              <image src="@/static/image/car_icon.png" mode="scaleToFill" />
            </view>
            <view class="car_info">
              <view class="no_car"> 尚未添加车辆信息 </view>
            </view>
          </view>
        </view>
        <view class="tip_text">
          赶紧参与活动吧～现在参与可以获得大额优惠券哦
        </view>
        <view class="btn_box flex_c" @click="open">
          <view class="in_box"> 立即提交车辆信息 </view>
        </view>
      </view>
    </view>
    <view class="card_box card2">
      <view class="title_box flex_c"> 活动规则 </view>
      <view class="rule_info">
        <rich-text :nodes="home_activity_content"></rich-text>
      </view>
    </view>
    <up-popup  :show="show" @close="close" @touchmove.prevent.stop round="20">
      <view class="form_box">
        <view class="title_box">填写车辆信息</view>
        <form @submit="submitHandler">
          <view class="form_item flex_s">
            <view class="left"> 姓名 </view>
            <view class="right">
              <input
                v-model="userInfo.name"
                placeholder="请输入姓名"
                placeholder-class="input-placeholder"
              />
            </view>
          </view>
          <view class="form_item flex_s">
            <view class="left"> 手机号 </view>
            <view class="right">
              <input
                type="number"
                placeholder="请输入手机号"
                placeholder-class="input-placeholder"
                @input="changeInput($event)"
                maxlength="11"
              />
            </view>
          </view>
          <view class="form_item flex_s">
            <view class="left"> 车辆信息 </view>
            <view class="right flex_se">
              <view
                class="check_box flex_s"
                v-for="(item, index) in carInfomation"
                :key="index"
                @click="check_id = item.value"
              >
                <view
                  class="circle"
                  :class="{ checked: check_id == item.value }"
                >
                </view>
                <view class="text">{{ item.title }}</view>
              </view>
            </view>
          </view>
          <view class="form_item flex_s">
            <view class="left">
              {{ check_id == 1 ? "车牌号" : "车架号" }}
            </view>
            <view class="right">
              <input
                v-model="carID"
                :placeholder="check_id == 1 ? '请输入车牌号' : '请输入车架号'"
                placeholder-class="input-placeholder"
              />
            </view>
          </view>
          <view class="tip_box">请认真填写，提交审核后不可修改！</view>
          <button class="btn_box" form-type="submit">立即提交</button>
        </form>
      </view>
    </up-popup>
    <licenseModal ref="myModal"></licenseModal>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import licenseModal from "@/components/licenseModal.vue";
import { JumpPath, Tips } from "@/utils";
import { onLoad, onShareAppMessage } from "@dcloudio/uni-app";
import { getHomeActivity, addCar, carList } from "@/api/car";
import { useTokenStore } from "@/store";
import { type CarItem } from "@/types/index";
import { debounceImmediate } from "@/utils/validate";
const tokenStore = useTokenStore();
let home_activity_content = ref("");
onLoad(() => {
  if (tokenStore.token) {
    getCarList();
  }
});
watch(
  () => tokenStore.token,
  (newValue: string) => {
    if (newValue) {
      uni.showLoading();
      getCarList();
    }
  }
);
onShareAppMessage(() => {
  return {
    title: "",
    path: "/pages/home/index",
  };
});
let temPhone = ref("");
function changeInput(e: any) {
  setTimeout(() => {
    temPhone.value = e.target.value;
  }, 0);
}
const phone = ref("");
function getHomeActivityHandle() {
  // 获取活动说明
  getHomeActivity().then((res) => {
    uni.hideLoading();
    const data = res.data;
    home_activity_content.value = data.home_activity_content;
  });
}

const carInfomation = ref([
  {
    value: 1,
    title: "车牌号",
    checked: true,
  },
  {
    value: 2,
    title: "车架号",
    checked: false,
  },
]);

const check_id = ref(1);
let carID = ref("");
//  表单数据
let userInfo = reactive({
  name: "",
  phone: "",
  license_plate: "", //车牌号
  vin: "", //车架号
});
const myModal = ref<InstanceType<typeof licenseModal> | null>(null);
// 创建表单弹窗响应式数据
const show = ref(false);
// 定义弹窗打开方法
function open() {
  const phoneStore = uni.getStorageSync("phone");
  // 未登录的时候弹出登录弹窗
  if (!phoneStore && myModal.value) {
    myModal.value.open();
    return;
  }
  // 打开逻辑，比如设置 show 为 true
  show.value = true;
}

function close() {
  // 关闭逻辑，设置 show 为 false
  show.value = false;
}

const carListData = ref<CarItem[]>([]);
function getCarList() {
  carList().then((res: any) => {
    getHomeActivityHandle();
    const data = res.data;
    carListData.value = data.list;
  });
}
const submitHandler = debounceImmediate(submitMiddle);
function submitMiddle() {
  userInfo.phone = temPhone.value;
  if (!userInfo.name) return Tips({ title: "请输入姓名" });
  if (!userInfo.phone) return Tips({ title: "请输入手机号" });
  // uni.showLoading({ title: "提交中..." });
  if (check_id.value == 1) {
    // 选择车牌号清空车架号数据
    userInfo.license_plate = carID.value;
    userInfo.vin = "";
  } else {
    // 反之
    userInfo.vin = carID.value;
    userInfo.license_plate = "";
  }
  // 提交逻辑
  addCar(userInfo).then((res: any) => {
    if(res.code==0){
      return Tips({title:res.info})
    }
    Tips({
      title: res.info,
      success() {
        getCarList();
        close();
      },
    });
  })
}
</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  background: var(--view-bg-theme);
  padding-bottom: calc(
    50rpx + constant(safe-area-inset-bottom)
  ); ///兼容 IOS<11.2/
  padding-bottom: calc(50rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

  .form_box {
    background: #f8f8f8;
    padding: 0 30rpx 30rpx;
    overflow: hidden;
    border-radius: 20rpx 20rpx 0 0;
    overflow: hidden;

    .tip_box {
      font-size: 24rpx;
      color: var(--view-red);
      text-align: center;
      margin: 40rpx 0 50rpx;
    }

    .form_item {
      padding: 0 36rpx;
      height: 110rpx;
      margin-bottom: 14rpx;
      border-radius: 14rpx;
      background: #fff;

      .left {
        width: 120rpx;
        font-size: 28rpx;
        color: #000;
      }

      .right {
        flex: 1;

        .circle {
          width: 38rpx;
          height: 38rpx;
          border-radius: 50%;
          border: 4rpx solid #000;
          margin-right: 10rpx;
        }

        .circle.checked {
          position: relative;
          background: #fe7325;
          border: 4rpx solid #fe7325;
        }

        .checked::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 50%;
          height: 50%;
          border-radius: 50%;
          border: 6rpx solid #fff;
        }

        .check_box:first-child {
          margin-right: 70rpx;
        }

        .input-placeholder {
          color: rgba(94, 91, 90, 0.5);
        }
      }
    }

    .title_box {
      width: fit-content;
      position: relative;
      margin: 34rpx auto 24rpx;
      font-size: 34rpx;
      font-weight: bold;
      color: var(--view-red-theme);
      margin-bottom: 50rpx;
      background: linear-gradient(90deg, #ff075b 0%, #fe5e3e 100%);
      -webkit-background-clip: text;
      /* 将背景裁剪到文本 */
      -webkit-text-fill-color: transparent;
      /* 将文本填充颜色设为透明 */
      background-clip: text;
      /* 其他浏览器的兼容性 */
      color: transparent;

      /* 其他浏览器的兼容性 */
      &::before {
        content: "";
        position: absolute;
        left: -30rpx;
        top: 50%;
        margin-top: -7rpx;
        width: 14rpx;
        height: 14rpx;
        background: #cbf7d0;
        transform: rotate(45deg);
      }

      &::after {
        content: "";
        position: absolute;
        right: -30rpx;
        top: 50%;
        margin-top: -7rpx;
        width: 14rpx;
        height: 14rpx;
        background: #fbe8ed;
        transform: rotate(45deg);
      }
    }
  }

  .card1 {
    padding: 10rpx;
  }

  .card2 {
    padding: 40rpx;

    .rule_info {
      color: #284968;
      font-size: 30rpx;
    }

    .title_box {
      width: 556rpx;
      height: 77rpx;
      border-radius: 999rpx;
      // line-height: 77rpx;
      text-align: center;
      font-size: 35rpx;
      color: #284968;
      font-weight: bold;
      margin: 0 auto 35rpx;
      border: 4rpx solid #fff;
      background: linear-gradient(
        270deg,
        rgb(167, 239, 253) 0%,
        rgb(221, 247, 138) 100%
      );
    }
  }

  .btn_box {
    width: 640rpx;
    height: 118rpx;
    line-height: 118rpx;
    text-align: center;
    margin: 0 auto;
    color: #fff;
    font-weight: bold;
    font-size: 34rpx;
    border: 6rpx solid #fcf7d1;
    background: var(--view-linear);
    box-shadow: 0 4rpx 30rpx 0 rgba(254, 97, 28, 0.4);
    border-radius: 999rpx;

    .in_box {
      width: 580rpx;
      height: 95rpx;
      line-height: 95rpx;
      border-radius: 999rpx;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0) 100%
      );
    }
  }

  .card_box {
    position: relative;
    width: 720rpx;
    min-height: 600rpx;
    overflow: hidden;
    margin: -20rpx auto 40rpx;
    background: rgba($color: #fff, $alpha: 0.6);
    border-radius: 20rpx;
    border: 2rpx solid #fff;

    .in_card {
      overflow: hidden;
      width: 700rpx;
      min-height: 603rpx;
      border-radius: 20rpx;
      background: linear-gradient(45deg, #ecfeee 0%, #e0fcff 50%, #fce7ec 100%);
      padding-bottom: 30rpx;
      .tip_text {
        font-size: 26rpx;
        color: #5e5b5a;
        text-align: center;
        margin: 40rpx auto 25rpx;
      }

      .car_box {
        width: 624rpx;
        margin: 0 auto;
        padding: 35rpx 30rpx;
        background: var(--view-card-linear);
        border-radius: 20rpx;
        border: 2rpx solid #fff;
        box-shadow: 0 4rpx 10rpx 0 rgba(118, 219, 229, 0.2);

        .car_item {
          &:not(:last-child) {
            margin-bottom: 30rpx;
          }
        }

        .car_info {
          flex-grow: 1;
          width: 468rpx;
          .car_top {
            .car_id {
              font-size: 34rpx;
              color: #284968;
              margin-bottom: 10rpx;
              font-weight: bold;
            }

            .car_name {
              font-size: 28rpx;
              color: #5d7e85;
            }
          }
        }

        .icon_box {
          flex-shrink: 0;
          width: 73rpx;
          height: 73rpx;
          margin-right: 20rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .no_car {
          color: #5d7e85;
          font-size: 28rpx;
        }
      }

      .tip_box {
        width: 620rpx;
        height: 75rpx;
        line-height: 75rpx;
        text-align: center;
        margin: 0 auto 20rpx;
        background: linear-gradient(90deg, #ff075b 0%, #fe5e3e 100%);
        font-size: 24rpx;
        font-weight: bold;
        color: #fff;
      }

      .title {
        width: fit-content;
        position: relative;
        margin: 34rpx auto 24rpx;
        font-size: 34rpx;
        font-weight: bold;

        background: linear-gradient(90deg, #ff075b 0%, #fe5e3e 100%);
        -webkit-background-clip: text;
        /* 将背景裁剪到文本 */
        -webkit-text-fill-color: transparent;
        /* 将文本填充颜色设为透明 */
        background-clip: text;
        /* 其他浏览器的兼容性 */
        color: transparent;

        /* 其他浏览器的兼容性 */
        &::before {
          content: "";
          position: absolute;
          left: -30rpx;
          top: 50%;
          margin-top: -7rpx;
          width: 14rpx;
          height: 14rpx;
          background: #cbf7d0;
          transform: rotate(45deg);
        }

        &::after {
          content: "";
          position: absolute;
          right: -30rpx;
          top: 50%;
          margin-top: -7rpx;
          width: 14rpx;
          height: 14rpx;
          background: #fbe8ed;
          transform: rotate(45deg);
        }
      }
    }
  }

  .top_img {
    position: relative;
    width: 100%;
    height: 675rpx;

    image {
      width: 100%;
      height: 100%;
    }

    .my_coupon {
      position: absolute;
      right: 0;
      font-weight: bold;
      bottom: 160rpx;
      padding: 0 10rpx 0 20rpx;
      height: 65rpx;
      background: linear-gradient(180deg, #22c984ff 0%, #7de069ff 100%);
      color: #fff;
      font-size: 24rpx;
      line-height: 65rpx;
      border-radius: 40rpx 0 0 40rpx;
    }
  }
}
</style>